<template>
	<view class="login pages">
		<view class="nav">
			<uni-icons type="closeempty" size="24" @click="back"></uni-icons>
			<view class="nav_info">
				<view style="color: grey;" @click="openIssue">{{$t('login.other.Encountered')}}</view>
				<view class="logo_lang">
					<view @click="langShow=!langShow">{{lang}}</view>
					<view class="logo_langList" v-show="langShow">
						<view v-for="item in list" :key="item.id" @click="langClick(item)">{{item.name}}</view>
					</view>
				</view>
			</view>

		</view>
		<view class="logo">
			<image :src="logo" mode=""></image>
		</view>
		<view class="body">
			<view v-if="phoneShow">
				<view class="form">
					<view class="form_title">{{$t('login.other.Log')}}</view>
					<view class="form_text">{{$t('login.other.Unregistered')}}</view>
					<view class="form_input">
						<view style="font-weight: bold;" @click="to(`/pages/shop/login/code?code=${code}`)">
							+{{code}}
							<uni-icons type="bottom" size="10" color="grey" style="margin-left: 10rpx;"></uni-icons>
						</view>
						<input type="number" :placeholder="$t('login.other.Mobile')" v-model="form.phone">
						<uni-icons type="clear" color="grey" v-show="!!form.phone" @click="form.phone=''"></uni-icons>
					</view>
					<view style="text-align: right;margin-top: 10rpx;" @click="to('/pages/shop/login/enroll')">
						{{$t('enroll.zhu')}}
					</view>
				</view>
				<view class="btn">
					<view @click="openPrivacy">{{$t('login.other.Get')}}</view>
					<view @click="phoneShow=false">{{$t('login.other.Password')}}</view>
				</view>
			</view>
			<view v-else>
				<view class="form">
					<view class="form_title">{{$t('login.other.Password')}}</view>
					<view class="form_input">
						<view style="font-weight: bold;" @click="to(`/pages/shop/login/code?code=${code}`)">
							+{{code}}
							<uni-icons type="bottom" size="10" color="grey" style="margin-left: 10rpx;"></uni-icons>
						</view>
						<input type="number" :placeholder="$t('login.other.Mobile')" v-model="form.phone">
						<uni-icons type="clear" color="grey" v-show="!!form.phone" @click="form.phone=''"></uni-icons>
					</view>
					<view class="form_input">
						<input v-if="eye" type="password" :placeholder="$t('login.other.Password')"
							v-model="form.password" style="margin-left: 0;">
						<input v-else type="text" :placeholder="$t('login.other.Password')" v-model="form.password"
							style="margin-left: 0;">
						<uni-icons :type="eye?'eye-filled':'eye-slash-filled'" color="grey" size="18"
							@click="eye=!eye"></uni-icons>
					</view>
					<view style="text-align: right;margin-top: 10rpx;" @click="to('/pages/shop/login/enroll')">
						{{$t('enroll.zhu')}}
					</view>
				</view>
				<view class="btn">
					<view @click="login">{{$t('login.other.Login')}}</view>
					<view @click="phoneShow=true">{{$t('login.other.Verification')}}</view>
				</view>
			</view>
			<view class="documentation">
				<view :class="checkShow?'check active':'check'" @click="checkShow=!checkShow">
					<uni-icons type="checkmarkempty" color="#fff" size="8"></uni-icons>
				</view>
				<view style="margin-left: 10rpx;color: gray;">{{$t('login.other.Read')}}</view>
				<view @click="to(`/pages/shop/login/policy?type=${0}`)">《{{$t('login.other.User')}}》</view>
				<view @click="to(`/pages/shop/login/policy?type=${1}`)">《{{$t('login.other.Privacy')}}》</view>
				<view @click="to(`/pages/shop/login/policy?type=${2}`)">《{{$t('login.other.Information')}}》</view>
			</view>
		</view>
		<!-- 服务协议 -->
		<uni-popup ref="privacy">
			<view class="privacy-content">
				<uni-icons type="closeempty" color="grey" class="privacy-icon" @click="closePrivacy(false)"></uni-icons>
				<view class="privacy-title">{{$t('login.other.Service')}}</view>
				<view class="privacy-text">
					{{$t('login.other.In')}}
					<text @click="to(`/pages/shop/login/policy?type=${0}`)">《{{$t('login.other.User')}}》</text>
					<text @click="to(`/pages/shop/login/policy?type=${1}`)">《{{$t('login.other.Privacy')}}》</text>
					<text @click="to(`/pages/shop/login/policy?type=${2}`)">《{{$t('login.other.Information')}}》</text>
					{{$t('login.other.Phone')}}
				</view>
				<view class="privacy-btn" @click="closePrivacy(true)">{{$t('login.other.Agree')}}</view>
			</view>
		</uni-popup>
		<!-- 遇到问题 -->
		<uni-popup ref="issue">
			<view class="issue-content">
				<view class="issue-title">{{$t('login.other.Having')}}</view>
				<view class="issue-pos" v-show="!phoneShow" @click="to('/pages/shop/login/forget')">
					{{$t('login.other.Forgot')}}
				</view>
				<view class="issue-btn" @click="closeIssue">{{$t('login.other.Cancel')}}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		login,
		getSetting
	} from '@/api/api.js'
	export default {
		data() {
			return {
				logo: '',
				code: 52,
				phoneShow: true,
				checkShow: false,
				eye: true,
				form: {},
				lang: '',
				langShow: false,
				list: [
					// {
					// 	id: 'zh-cn',
					// 	name: this.$t('option.language.Chinese')
					// }, {
					// 	id: 'ft',
					// 	name: this.$t('option.language.fChinese')
					// },
					{
						id: 'en',
						name: this.$t('option.language.English')
					},
					{
						id: 'sp',
						name: this.$t('option.language.Sp')
					}
				],
			};
		},
		onShow() {
			this.checkShow = false
			this.getSetting()
			let str = uni.getStorageSync('lang')
			if (str == 'zh-cn') {
				this.lang = this.$t('option.language.Chinese')
			} else if (str == 'ft') {
				this.lang = this.$t('option.language.fChinese')
			} else if (str == 'en') {
				this.lang = this.$t('option.language.English')
			} else {
				this.lang = this.$t('option.language.Sp')
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			to(url) {
				uni.navigateTo({
					url: url
				})
			},
			getSetting() {
				getSetting().then(res => this.logo = res.data.data.logo)
			},
			openPrivacy() {
				if (this.checkShow) {
					let form = {}
					form.phone = this.form.phone
					form.phone_ex = this.code
					form.keywords = 'login'
					uni.navigateTo({
						url: `/pages/shop/login/captcha?form=${JSON.stringify(form)}`
					})
				} else {
					this.$refs.privacy.open('bottom')
				}
			},
			closePrivacy(blo) {
				if (this.phoneShow) {
					if (blo) {
						this.checkShow = true
						let form = {}
						form.phone = this.form.phone
						form.phone_ex = this.code
						form.keywords = 'login'
						uni.navigateTo({
							url: `/pages/shop/login/captcha?form=${JSON.stringify(form)}`
						})
					} else {
						this.checkShow = false
					}
				} else {
					if (blo) {
						this.checkShow = true
						this.login()
					} else {
						this.checkShow = false
					}
				}
				this.$refs.privacy.close()
			},
			login() {
				if (this.checkShow) {
					login({
						type: '2',
						phone_ex: this.code,
						phone: this.form.phone,
						password: this.form.password
					}).then(res => {
						uni.setStorageSync('token', res.data.data.token)
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/shop/index/index?frist=1"
							})
						}, 600)
					})
				} else {
					this.$refs.privacy.open('bottom')
				}
			},
			openIssue() {
				this.$refs.issue.open('bottom')
			},
			closeIssue() {
				this.$refs.issue.close()
			},
			langClick(item) {
				this.lang = item.name
				uni.setStorageSync('lang', item.id)
				location.reload()
				this.langShow = false
			}
		}
	}
</script>

<style lang="scss">
	/deep/.uni-input-placeholder {
		font-size: 28rpx;
		font-weight: normal;
	}

	.nav_info {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.logo_lang {
		padding: 0 20rpx;
		border-radius: 10rpx;
		position: relative;
		background-color: #00CBCC;
		color: #fff;
		// height: 70rpx;
		margin-left: 20rpx;

		.logo_langList {
			position: absolute;
			top: 55rpx;
			right: 0;
			background-color: #fff;
			padding: 0 20rpx;
			border: 1px solid #ddd;
			color: #333;
			z-index: 999;
			border-radius: 10rpx;

			&>view {
				border-bottom: 1px solid #ddd;
				padding: 10rpx;
				text-align: center;
			}
		}
	}

	.login {
		padding: 10px;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.logo {
		width: 200rpx;
		height: 200rpx;
		margin: 100rpx auto 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.body {
		width: 90%;
		margin: 0 auto;

		.form {
			margin: 140rpx auto 60rpx;

			.form_title {
				font-size: 46rpx;
			}

			.form_text {
				color: gray;
				margin: 20rpx 0 30rpx;
			}

			.form_input {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ddd;
				height: 80rpx;
				margin-top: 30rpx;

				input {
					flex-grow: 1;
					margin-left: 30rpx;
					font-weight: bold;
					font-size: 40rpx;
				}
			}
		}

		.btn {
			&>view {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border-radius: 6rpx;
				margin-bottom: 20rpx;
			}

			&>view:first-child {
				background-color: #00C2C2;
				color: #fff;
			}
		}

		.documentation {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			font-size: 26rpx;

			.check {
				width: 25rpx;
				height: 25rpx;
				border: 1rpx solid #ddd;
				border-radius: 25rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.active {
				border: none;
				background-color: #00C2C2;
			}
		}
	}

	.privacy-content {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 40rpx;
		position: relative;

		.privacy-icon {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.privacy-title {
			font-size: 36rpx;
			text-align: center;
			font-weight: bold;
		}

		.privacy-text {
			margin: 20rpx 0 40rpx;
			color: gray;

			&>text {
				color: #000;
			}
		}

		.privacy-btn {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 6rpx;
			margin-bottom: 20rpx;
			background-color: #00C2C2;
			color: #fff;
		}
	}

	.issue-content {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		text-align: center;
		font-size: 26rpx;

		.issue-title {
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1px solid #F4F3F8;
			color: #ccc;
		}

		.issue-caozuo {
			height: 140rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.issue-text {
				font-size: 38rpx;
			}
		}

		.issue-pos {
			height: 100rpx;
			line-height: 100rpx;
			border-top: 1px solid #F4F3F8;
			font-size: 34rpx;
		}

		.issue-btn {
			height: 100rpx;
			line-height: 80rpx;
			border-top: 20rpx solid #F4F3F8;
		}
	}
</style>